import React from 'react'
import classNames from 'classnames'
import {observer} from 'mobx-react'
import * as PropTypes from 'prop-types'
import {FormFieldStore} from '../Form'
import {CalendarStore} from "@/lib/Calendar";
import {StoreManager} from "@/stores";

@observer
class DatePicker extends React.Component {
    static contextTypes = {
        formSettings: PropTypes.object
    }

    constructor(props, context) {
        super(props, context)
        const parent = context.formSettings && context.formSettings.store
        this.store = StoreManager.create(new FormFieldStore(props), parent)
        this.formSettings = this.context.formSettings
    }

    componentWillMount() {
        this.calendar = new CalendarStore(this.value, this.props.minimum, this.props.maximum)
        this.calendar.renderDays()
    }

    componentWillUnmount() {
        StoreManager.delete(this.store)
    }

    prevMonth() {
        this.calendar.prevMonth()
        this.calendar.renderDays()
    }

    /*
        prevYear() {

        }

        nextYear() {

        }*/

    nextMonth() {
        this.calendar.nextMonth()
        this.calendar.renderDays()
    }


    render() {
        const calendar = this.calendar
        return (
            <div className="datepicker">
                <div className="datepicker-buttons">
                    <a className="prev" onClick={this.prevMonth.bind(this)}>上个月</a>
                    <span>12</span>
                    <a className="next" onClick={this.nextMonth.bind(this)}>下个月</a>
                </div>
                <ul className="datepicker-weeks">
                    {calendar.weeks.map((item) => <li key={item}>{item}</li>)}
                </ul>
                <ul className="datepicker-days">
                    {calendar.days
                        .map((item, index) =>
                            <li key={index}
                                className={classNames({
                                    invalid: item.invalid,
                                    active: item.active,
                                    prev: item.prev,
                                    next: item.next
                                })}>
                                {item.day}
                            </li>
                        )}
                </ul>
            </div>
        );
    }

}

export default DatePicker